<!-- 邮件任务 -->
<template>
  <div>
    <el-row style="background: #fff;">
      <div class="content parameType" style="width: 100%;margin:0">
        <div class="certification top"  style="width: 100%">
          <div class="toptitle">
            <div class="title">历史软文列表</div>
          </div>
          <el-table class="tableRowclcick" border :data="tableData" style="width: 100%; margin-top: 15px" @row-click="rowclick" :row-class-name="rowClassName" :row-style="rowStyle" :stripe="false">
            <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
            <el-table-column label="创建时间" prop="CreateTime" align="left" width="200px"></el-table-column>
            <el-table-column label="邮件标题" prop="Title" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="left" width="150px" fixed="right">
              <template slot-scope="scope">
                <!-- <el-button size="mini" @click="changeMailGlobal(scope.row)">修改</el-button> -->
                <el-button size="mini" type="primary" @click="changeMailGlobal(scope.row)">查看</el-button>
                <el-button size="mini" type="danger" @click="deleteMailGlobal(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :current-page=pageNum
            :page-size=pageSize
            background 
            layout="total, prev, pager, sizes, next, jumper"
            :total="total">
          </el-pagination>
          <!-- <div class="title"  style="width: 100%; margin-top: 15px">历史软文详情</div>
          <div class="emailContent" v-html="Content"></div> -->
        </div>
      </div>
      <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape=false
        title="邮件内容"
        :visible.sync="dialogVisible"
        v-el-drag-dialog
        width="50%">
        <div class="emailContent" v-html="Content"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="info" @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
import treeTransfer from 'el-tree-transfer'
import { connrequest, uploadfile } from '@/api/firstPage'
import { parseTime, getuuid, getTreeData } from '@/utils/index.js';
import { getToken } from '@/utils/auth' // get token from cookie
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
directives: { elDragDialog },
components: { treeTransfer },
data() {
  return {
    rowIndex: '',
    pageNum: 1,
    pageSize: 10,
    total: 0,
    tableData: [],
    Content: '',
    dialogVisible: false,
  }
},
  watch:{},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    flatten (tree, arr = []) {
      tree.forEach(item => {
        const {children, ...props} = item
        // 添加除了children的属性
        arr.push(props)
        if (children) {
          // 递归将所有节点加入到结果集中
          this.flatten(children, arr)
        }
      })
      return arr
    },
    rowStyle ({ row, rowIndex }) {
      if (this.rowIndex === rowIndex) {
        return {
          'background-color': '#ffeecf !important'
        }
      }
    },
    rowClassName ({ row, rowIndex }) {
      row.index = rowIndex
    },
    rowclick(row){
      this.rowIndex = row.index
      this.Content = row.Content
    },
    setDisabled(arr){
      arr.map(item => {
        if(!item.children && !item.EMail){
          item.disabled = true
        }
        if(item.children){
          this.setDisabled(item.children)
        }
        return item
      })
      return arr
    },
    changeMailGlobal(row){
      this.Action = 2
      this.resourceForm = {...row, Name: row.name}
      this.dialogVisible = true
    },
    deleteMailGlobal(row){
      this.$confirm('此操作将删除该软文, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          Data:{
            AutoID: row.AutoID
          }
        }
        const res = await connrequest('DeleteEMailAIContentLog', data)
        if(res.Status.StatusCode === 0){
          this.$message.success('删除成功')
          this.dialogVisible = false
          this.getData()
          this.Content = ''
          this.ToAccount = []
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async getData() {
      const data = {
        Paging:{
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize,
        }
      }
      const res = await connrequest('GetEMailAIContentLog', data)
      res.Data = res.Data || []
      res.Data.map(item => { 
        item.CreateTime = parseTime(item.CreateTime)
        return item
      })
      this.tableData = res.Data
      this.total = res.Paging.TotalCount
      return res.Data
    },
    handleSizeChange(val){
      this.pageNum = 1
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange( pageNum ){
      this.pageNum = pageNum
      this.getData()
    },
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "~@/styles/variables.scss";
::v-deep .wl-transfer .transfer-title{
  font-size: 14px !important;
  margin: 0px !important;
}
.parameType .title{
  border: none !important;
}
.emailContent{
  width: 100%;
  height: 600px;
  border: 1px solid #dcdfe6;
  font-size: 16px;
  color: #aaa;
  padding: 40px;
  text-indent: 2em;
  text-align: justify;
  overflow-y: auto;
}
.content {
  position: relative;
  margin-top: 25px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  ::v-deep .certification{
    .el-form-item{
      margin-bottom: 10px;
    }
    .el-col{
      display: flex;
      align-items: center;
      p{
        width: 100px;
        display:block;
        color: #aaa;
        font-size: 12px;
        padding-left: 20px;
        white-space: nowrap;
      }
    }
  }
}
.top{
  flex-wrap: nowrap;
  margin-bottom: 20px;
}
.btn{
  margin: 20px 0;
}
::v-deep .tabs{
  .el-tabs__content{
    overflow: visible !important;
  }
}
::v-deep .tableRowclcick .el-table__body tr:hover>td{
  cursor: pointer;
  background-color: #ffeecf!important;
}
::v-deep .tableRowclcick .el-table__body tr.current-row>td{
  background-color: #ffeecf!important;
}




</style>

